
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <style>
body {
  margin: 0;
}

.container {
  margin: 0;
  padding: 0;
  width: 100%;
}

.container div {
  box-sizing: border-box;
  min-height: 150px;
  min-width: 150px;
}

.c1 {
  color: #ddd;
  background-color: #003476;
}

.c2 {
  color: #ddd;
  background-color: #0062d2;
}

.c3 {
  color: #333;
  background-color: #b4d2f7;
}

.c4 {
  color: #333;
  background-color: #d5dfef;
}

.c5 {
  color: #333;
  background-color: #dfe1e5;
}
      /* // [START ocanvas] */
      body {
        overflow-x: hidden;
      }
      
      .container {
        display: block;
      }

      .c1, .c3 {
        position: absolute;
        width: 250px;
        height: 100%;
        
        /*
          This is a trick to improve performance on newer versions of Chrome
          #perfmatters
        */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden; 

        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        
        z-index: 1;
      }
  
      .c1 {
        /*
        Using translate3d as a trick to improve performance on older versions of Chrome
        See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
        #perfmatters
        */
        -webkit-transform: translate(-250px,0);
        transform: translate(-250px,0);
      }

      .c2 {
        width: 100%;
        position: absolute;
      }
      
      .c3 {
        left: 100%;
      }

      .c1.open {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
      }

      .c3.open {
        -webkit-transform: translate(-250px,0);
        transform: translate(-250px,0);
      }
      
      @media (min-width: 500px) {
        /* If the screen is wider then 500px, use Flexbox */
        .container {
          display: -webkit-flex;
          display: flex;
          -webkit-flex-flow: row nowrap;
          flex-flow: row nowrap;
        }
        .c1 {
          position: relative;
          -webkit-transition: none 0s ease-out;
          transition: none 0s ease-out;
          -webkit-transform: translate(0,0);
          transform: translate(0,0);
        }
        .c2 {
          position: static;
        }
      }

      @media (min-width: 800px) {
        body {
          overflow-x: auto;
        }
        .c3 {
          position: relative;
          left: auto;
          -webkit-transition: none 0s ease-out;
          transition: none 0s ease-out;
          -webkit-transform: translate(0,0);
          transform: translate(0,0);
        }
      }
      /* // [END ocanvas] */
      

    </style>
    <title>Responsive Web Design Pattern: Off Canvas</title>
  </head>
  <body>
    <div class="container" role="main">
      <div class="c1" id="leftDrawer">
      </div>
      <div class="c2" id="mainPanel">
        Click the <code>div</code>'s to change views
      </div>
      <div class="c3" id="rightDrawer">
      </div>
    </div>

    <script type="text/javascript">
      var position = 0;
      var mainPanel = document.getElementById("mainPanel");
      var leftDrawer = document.getElementById("leftDrawer");
      var rightDrawer = document.getElementById("rightDrawer");

      function toggle(evt) {
        position++;
        if (position % 3 == 0) {
          leftDrawer.classList.remove("open");
          rightDrawer.classList.remove("open");
        } else if (position % 3 == 1) {
          leftDrawer.classList.add("open");
          rightDrawer.classList.remove("open");
        } else {
          leftDrawer.classList.remove("open");
          rightDrawer.classList.add("open");
        }  
      }

      mainPanel.addEventListener("click", toggle);
      leftDrawer.addEventListener("click", toggle);
      rightDrawer.addEventListener("click", toggle);
      
    </script>
  
    <script type="text/javascript">
      function init() {
        window.matchMedia("(min-width: 800px)").addListener(hitMQ);
        window.matchMedia("(min-width: 500px)").addListener(hitMQ);
      }

      function hitMQ(evt) {
        sampleCompleted("RWDPatterns-OffCanvas");
      }

      init();

    </script>
  </body>
</html>
